<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=BIG5">
    <title>Insert title here</title>    

	<script type="text/javascript" src="<c:url value="/resources/jquery/1.4/jquery.js" />"></script>
    
	<style>
	.error {
	    font-size: .75em;
		color: #ff0000;
	}
	.errorblock{
		color: #000;
		background-color: #ffEEEE;
		border: 3px solid #ff0000;
		padding:8px;
		margin:16px;
	}
	
	</style>    
    
    <script>
    function submitAction(executeValue){
    	$('#execute').val(executeValue);

    	$('#form').submit(function() {alert('');
    		$.post($(this).attr("action"), $(this).serialize(), function(html) {
				$("#forms").replaceWith(html);
			});  
    		return false;  
    	});
    }
    
   
    </script>
</head>
<body>
<div id="forms">

<form:form method="POST" modelAttribute="employeeModel" id="form" name="form">
    <input type="hidden" id="execute" name="execute" value="">
    <input type="hidden" id="deleteId" name="deleteId" value="">

    <form:errors path="*" cssClass="errorblock" element="div"/>
    

    <div>
        <button onclick="submitAction('add');">新增</button>&nbsp;
        <button onclick="submitAction('save');">儲存</button>&nbsp;
        <button onclick="submitAction('test');">測試</button>
    </div>    
    
    <div>
        <table border="1">
            <tr>
                <th>&nbsp;</th>
                <th>Employee No</th>
                <th>Name</th>
                <th>Department</th>
                <th>Sex</th>
                <th>Birthday</th>
                <th>Address</th>
                <th>Zip</th>
                <th>Create Date</th>
                <th>Delete</th>
            </tr>
            
            <c:forEach var="employee" items="${employeeModel.employees}" varStatus="s">
            <tr>
                <td>${s.index+1}&nbsp;</td>
                <td><form:input path="employees[${s.index}].empNo" size="8"/><br/>
                    <form:errors path="employees[${s.index}].empNo" cssClass="error" /></td>
                <td><form:input path="employees[${s.index}].name" size="10"/><br/>
                    <form:errors path="employees[${s.index}].name" cssClass="error" /></td>
                <td><form:select path="employees[${s.index}].deptNo">
						<form:option value="NONE" label="--- Select ---"/>
						<form:options items="${deptSelectList}" />
					</form:select></td>
                <td><form:select path="employees[${s.index}].sex">
						<form:option value="NONE" label="--- Select ---"/>
						<form:options items="${sexSelectMap}" />
					</form:select></td>
                <td><form:input path="employees[${s.index}].birthday" /><br/>
                    <form:errors path="employees[${s.index}].birthday" cssClass="error" /></td>
                <td><form:input path="employees[${s.index}].address" /><br/>
                    <form:errors path="employees[${s.index}].address" cssClass="error" /></td>
                <td><form:input path="employees[${s.index}].zip" size="8"/><br/>
                    <form:errors path="employees[${s.index}].zip" cssClass="error" /></td>
                <td>&nbsp;<fmt:formatDate value="${employee.createDate}" pattern="yyyy/MM/dd"/></td>
                <td><button onclick="form.deleteId.value='${s.index}';submitAction('delete');">刪除</button></td>
            </tr>
            </c:forEach>
        </table>
    </div>    
</form:form>

</div>

</body>
</html>